<template>
  <div class="box">
    <el-header style="text-align: right; font-size: 12px">
      <img :src="imgs" alt="" height="60px" />
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="exit">注销</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <marquee
        behavior="scroll"
        direction="left"
        style="color: #fff; font-size: 16px"
        width="120"
        >{{ username }} <span style="color: #f00">正在登录中</span>
      </marquee>
    </el-header>
  </div>
</template>
    
<script>
export default {
  data() {
    return {
      imgs: require('../assets/avtar.jpg'),
      username: [],
    }
  },
  created() {
    this.$http.get('/api/getManager').then((res) => {
      // console.log(res)
      if (res.errNo === 0 && res.message === 'success') {
        this.username = res.accountInfo.username
      }
    })
  },
  methods: {
    exit() {
      // 清空vuex
      this.$store.commit('exit')
      // 跳转
      this.$router.push('/login')
    },
  },
}
</script>
    
<style lang="scss" scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  position: relative;
}
img {
  position: absolute;
  left: 0;
  top: 0;
}
i {
  position: relative;
  top: -22px;
}
.box {
  width: 100%;
}
</style>